<template>
  <div>
    <van-nav-bar
      :title="addressType === 'edit' ? '编辑地址' : '添加地址'"
      left-arrow
      fixed
      placeholder
      @click-left="goBack"
    >
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <van-address-edit
      :area-list="areaList"
      :address-info="addressInfo"
      :show-delete="addressType === 'edit'"
      show-set-default
      show-search-result
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="addressSave"
      @delete="onDelete"
    />
  </div>
</template>
<script>
import { onMounted, reactive, toRefs } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { addressDetail, addressDelete, addressEdit, address } from '../../network/address'
import { areaList } from '../../utils/address'
import { Toast } from 'vant'
export default {
  setup () {
    const router = useRouter()
    const route = useRoute()
    const state = reactive({
      addressType: '',
      addressId: 0,
      addressInfo: {},
      areaCode: ''
    })
    const init = () => {
      Toast.loading({ message: '加载中...', forbidClick: true })
      if (state.addressType === 'edit') {
        addressDetail(state.addressId).then(res => {
          console.log(res)
          Object.entries(areaList.county_list).forEach(([id, text]) => {
            if (res.county === text) {
              const provinceItem = Object.entries(areaList.province_list).filter(item => item[0].substr(0, 2) === id.substr(0, 2))[0]
              const cityItem = Object.entries(areaList.city_list).filter(item => item[0].substr(0, 4) === id.substr(0, 4))[0]
              if (provinceItem[1] === res.province && cityItem[1] === res.city) {
                state.areaCode = id
              }
            }
          })
          state.addressInfo = {
            name: res.name,
            tel: res.phone,
            province: res.province,
            city: res.city,
            county: res.county,
            addressDetail: res.address,
            isDefault: res.is_default === 1,
            areaCode: state.areaCode
          }
          Toast.clear()
        })
      }
    }
    onMounted(() => {
      const { id, type } = route.query
      state.addressType = type
      state.addressId = id
      init()
    })
    const addressSave = (value) => {
      console.log(value)
      const params = {
        name: value.name,
        address: value.addressDetail,
        phone: value.tel,
        province: value.province,
        city: value.city,
        county: value.county,
        is_default: value.isDefault ? 1 : 0
      }
      if (state.addressType === 'edit') {
        Toast.loading({ message: '加载中...', forbidClick: true })
        addressEdit(state.addressId, params).then(res => {
          Toast('修改成功')
          Toast.clear()
        })
      } else if (state.addressType === 'add') {
        address(params).then(res => {
          Toast('添加成功')
          Toast.clear()
        })
      }
      setTimeout(() => {
        router.back()
      }, 500)
    }
    const onDelete = () => {
      addressDelete(state.addressId).then(res => {
        Toast('删除成功')
        setTimeout(() => {
          router.back()
        }, 500)
      })
    }
    const goBack = () => {
      router.go(-1)
    }
    return {
      ...toRefs(state),
      goBack,
      areaList,
      addressSave,
      onDelete
    }
  }
}
</script>
<style scoped>
</style>
